<template>
	<view>
		<view class="my-bg pad-24">
			<view @click="hanldeUserInfo(item)" v-for="item in list" :key="item.id"
				class="bg-white pad-30 mar-bottom-30 font-28 radius20">
				<view class="centerXY betweenX">
					<view class="color-text">发票类型：{{item.invoice_type == 1 ? '个人' : '公司'}} </view>
					<view @click.stop="handleDel(item.id)" class="color-primary">删除</view>
				</view>
				<view class="mar-top-24 color-646464">发票抬头：{{item.name}}</view>
				<template v-if="item.invoice_type == 2">
				<view class="mar-top-24 color-646464">税号：{{item.tax_no}}</view>
				<view class="color-646464">公司电话：{{item.company_phone}}</view>
				<view class="mar-top-24 color-646464">开户行：{{item.bank_name}}</view>
				<view class="mar-top-24 color-646464">开户行卡号：{{item.bank_card_no}}</view>
				<view class="mar-top-24 color-646464">公司注册地址：{{item.company_address}}</view>
				</template>
			</view>

			<view class="button-bottom">
				<view class="button-style centerXY" @click="hanldeAdd">
					<image class="add" src="/static/image/add.png"></image>
					<view class="mar-left-10">新增</view>
				</view>
			</view>
		</view>

		<my-popup content="您确定删除吗？" :show="isPopup" @cancel="isPopup = false" @confirm="hanldeConfirm"></my-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { getInvoiceTitle, delInvoiceTitle } from '@/api/user.js';
	import { onShow } from '@dcloudio/uni-app';

	// 备注
	const newUserRemark = ref('');
	// 打开修改备注弹窗
	const showEdit = ref(false);
	// 当前条数据
	const rowData = ref({});

	// 跳转详情
	const hanldeUserInfo = (item) => {
		uni.navigateTo({
			url: '/pages/my_actions/InvoiceHeader/InvoiceHeader?id=' + item.id
		})
	}

	// 去新增
	const hanldeAdd = (id) => {
		uni.navigateTo({
			url: '/pages/my_actions/InvoiceHeader/InvoiceHeader'
		})
	}

	// 点击解绑
	const isPopup = ref(false);
	const postId = ref('');
	const handleDel = (id) => {
		postId.value = id;
		isPopup.value = true;
	}

	// 确定删除
	const hanldeConfirm = () => {
		delInvoiceTitle({
			ids: [postId.value]
		}).then(res => {
			if (res.code == 200) {
				uni.$u.toast(res.msg);
				getInvoiceTitleAll();
				isPopup.value = false;
			}
		})
	}

	// 打开弹窗
	const handleShowEdit = (item) => {
		showEdit.value = true;
		rowData.value = item;
		newUserRemark.value = item.user_remark;
	}

	onShow(() => {
		getInvoiceTitleAll();
	})

	// 获取所以水表
	const list = ref([]);
	const getInvoiceTitleAll = () => {
		getInvoiceTitle().then(res => {
			if (res?.code == 200) {
				list.value = res.data.lists;
			}
		})
	}
</script>

<style scoped lang="scss">
	.my-bg {
		background-image: url('https://file.jitoushuizhan.cn/upload/2025/02/03/111ba83702f882f08421c066eb85f6f6.png');
		background-size: 100% 489rpx;
		background-color: #F7F8FA;
		background-repeat: no-repeat;
		min-height: 100vh;
		box-sizing: border-box;
		padding-bottom: 120rpx;
	}

	.button-bottom {
		width: 100%;
		padding: 35rpx 40rpx;
		box-sizing: border-box;
		background: white;
		position: fixed;
		bottom: var(--window-bottom);
		left: 0rpx;
		z-index: 2;

		.button-style {
			padding: 20rpx 0;
			text-align: center;
		}
	}

	.add {
		width: 28rpx;
		height: 28rpx;
	}

	.set {
		border: 1rpx solid $uni-color-primary;
		padding: 5rpx 20rpx;
		border-radius: 40rpx;
		margin-bottom: 30rpx;
	}

	.setImgae {
		width: 28rpx;
		height: 25rpx;
	}

	.content {
		height: 200rpx;
	}

	.up-popup-bg {
		background: linear-gradient(180deg, #F1F5FC 0%, #FFFFFF 100%);
	}

	.cancel {
		// border: 2rpx solid $uni-color-primary;
		background: rgba(0, 85, 254, 0.1);
	}
</style>